<template>
  <div style="display: flex;">
    <div class="commandBar" :class="{ 'bottom-bar' : btnPosition === 'bottom' }">
      <div v-for="btn in commandBtns" :key="btn" class="commandBtn">
        <el-button v-if="btn.btnType==='1'" plain @click.native="handleBtnClick(btn)">
          <svg-icon v-if="btn.btnIcon.indexOf('.svg')!==-1" :icon-class="btn.btnIcon.substring(0,btn.btnIcon.indexOf('.svg'))" :class="btn.btnIcon.substring(0,btn.btnIcon.indexOf('.svg'))" />
          <i v-if="btn.btnIcon.indexOf('.svg')===-1" :class="'el-icon-'+btn.btnIcon" />
          <span>{{ btn.btnName }}</span>
        </el-button>

        <el-dropdown v-if="btn.btnType==='2'" :placement="'top'" @command="handleBtnClick">
          <el-button plain>
            <svg-icon v-if="btn.btnIcon.indexOf('.svg')!==-1" :icon-class="btn.btnIcon.substring(0,btn.btnIcon.indexOf('.svg'))" />
            <i v-if="btn.btnIcon.indexOf('.svg')===-1" :class="'el-icon-'+btn.btnIcon" />{{ btn.btnName }}<i class="el-icon-arrow-up el-icon--right" />
          </el-button>
          <el-dropdown-menu slot="dropdown" :split-button="true">
            <el-dropdown-item v-for="(subBtn,subIndex) in commandBar.filter(subObj=>(subObj.btnGroupId===btn.id))" :key="subIndex" :divided="subIndex>0?true:false" :command="subBtn">{{ subBtn.btnName }}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>

      <div v-if="moreBtns.length>0" class="commandBtn">
        <el-dropdown :placement="'top'" @command="handleBtnClick">
          <el-button plain>
            <svg-icon icon-class="email_moreBtnIcon" /> 更多<i class="el-icon-arrow-up el-icon--right" />
          </el-button>
          <el-dropdown-menu slot="dropdown" :split-button="true">
            <el-dropdown-item v-for="(subBtn,subIndex) in moreBtns" :key="subIndex" :divided="subIndex>0?true:false" :command="subBtn">{{ subBtn.btnName }}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>

      <div v-if="submitBtn!=null" class="commandBtn">
        <el-button type="primary" @click.native="handleBtnClick(submitBtn)">
          <svg-icon v-if="submitBtn.btnIcon.indexOf('.svg')!==-1" :icon-class="submitBtn.btnIcon.substring(0,submitBtn.btnIcon.indexOf('.svg'))" />
          <i v-if="submitBtn.btnIcon.indexOf('.svg')===-1" :class="'el-icon-'+submitBtn.btnIcon" />
          <span>{{ submitBtn.btnName }}</span>
        </el-button>
      </div>

    </div>
  </div>
</template>

<script>
export default {
    name: 'CommandBar',
    components: {

    },
    props: {
        commandBar: { type: Array, default: function() { return [] } },
        btnPosition: { type: String, default: function() { return 'top' } },
        showBtnNames: { type: Array, default: function() { return [] } }
    },
    data() {
        return {
            commandBtns: [],
            moreBtns: [],
            submitBtn: null
        }
    },
    computed: {

    },
    watch: {

    },
    created() {
        const hiddenBtnNames = ['修改红头']
        const allShowBtnNames = ['关闭', '保存', '编辑正文', '填写文号', '盖章', '流程管控', '另存为', '收回文件', '签收', '签收文件', '已阅']
        if (this.showBtnNames && this.showBtnNames.length > 0) {
            this.showBtnNames.forEach(btn => {
                if (allShowBtnNames.indexOf(btn) === -1) {
                    allShowBtnNames.push(btn)
                }
            })
        }

        this.commandBar.forEach(btn => {
            if (btn.btnIcon === 'off') {
                btn.btnIcon = 'glyphicon-off.svg'
            } else if (btn.btnIcon === 'list-alt') {
                btn.btnIcon = 'list-alt.svg'
            } else if (btn.btnIcon === 'check') {
                btn.btnIcon = 'checked.svg'
            } else if (btn.btnIcon === 'remove') {
                btn.btnIcon = 'remove.svg'
            } else if (btn.btnIcon === 'save') {
                btn.btnIcon = 'save.svg'
            } else if (btn.btnIcon === 'saved') {
                btn.btnIcon = 'saved.svg'
            } else if (btn.btnIcon === 'arrow-left') {
                btn.btnIcon = 'refresh-left'
            } else if (btn.btnIcon === 'wrench') {
                btn.btnIcon = 'setting'
            } else if (btn.btnIcon === null) {
                btn.btnIcon = ''
            }

            btn.btnType += ''

            if (btn.btnName === '办理' || btn.btnName === '提交' || btn.btnName === '已阅') {
                this.submitBtn = btn
            } else if (allShowBtnNames.indexOf(btn.btnName) !== -1 || btn.btnType === '2') {
                this.commandBtns.push(btn)
            } else if (btn.btnType === '4' || (btn.btnType === '1' && hiddenBtnNames.indexOf(btn.btnName) === -1)) {
                this.moreBtns.push(btn)
            }
        })

        if (this.commandBtns.length === 0 || this.moreBtns.length === 1) {
            this.commandBtns.push(...this.moreBtns)
            this.moreBtns = []
        }
    },
    beforeDestroy() {

    },
    mounted() {

    },
    methods: {
        handleBtnClick(btn) {
            if (btn.btnParams !== undefined && btn.btnParams !== null) {
                btn.btnClick.apply(this.$parent, btn.btnParams)
            } else {
                btn.btnClick.apply(this.$parent)
            }
        }
    }
}
</script>

<style scoped lang="scss">
@import "~@/wapp/common/styles/variables.scss";

.commandbar-dropdown-menu {
    margin-top:0px!important;
    text-align: center;
}

.commandBar{
    background: #FFFFFF;
    display: flex;
    justify-content: center;
    align-items: center;
    .commandBtn {
        margin-right: 14px;
    }

    .glyphicon-off{
      color: #ff0000;
    }
    .download{
      color: #0e830e;
    }
    .save{
      color: darkblue;
    }
    .el-icon-setting{
     color: #ff7b00d8
    }
    .el-icon-edit{
      color: darkblue;
    }
    .el-icon-edit-outline{
      color: darkblue;
    }
    .el-icon-refresh-left{
      color: #ff7b00d8
    }
}
.bottom-bar{
    z-index: 1000!important;
    margin:0 auto;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 76px;
    box-shadow: 0px -2px 4px 0px rgba(0, 0, 0, 0.06);
}

</style>
